<template>
  <view class="padding-lr-sm " style="background-color: #f2f3f6; min-height: 100vh;padding-bottom: 200rpx;">

    <view style="z-index: 999;">
      <u-loading-page loading-text="商单数据获取中..." bg-color="#e8e8e8" :loading="loadState"></u-loading-page>
    </view>
    <u-collapse @change="change" @close="close" @open="open" :border="false" v-model="moren">

      <!-- 商家信息 -->
      <view class="crad padding-sm margin-top-sm">
        <u-collapse-item title="基础信息" name="0" :border="false">
          <u--form labelPosition="left" :model="form" ref="formRef" :labelWidth="120">
            <u-form-item label="抖音昵称" borderBottom>
              <view class="u-text-right">
                {{form.dy_nickname}}
              </view>
            </u-form-item>
            <u-form-item label="城市" borderBottom>
              <view class="u-text-right">
                <template v-if="form.province==form.city">
                  {{form.city}}{{form.area}}
                </template>
                <template v-if="form.province!=form.city">
                  {{form.province}}{{form.city}}{{form.area}}
                </template>
              </view>
            </u-form-item>
            <u-form-item label="性别" borderBottom>
              <view class="u-text-right">
                男
              </view>
            </u-form-item>
            <u-form-item label="抖音ID" borderBottom>
              <view class="u-text-right" style="vertical-align: middle;">
                {{form.dy_id}}
                <image style="width: 28rpx; height: 28rpx;" src="../../static/img/copy.png" mode=""
                  @tap.stop="copy(form.dy_id)">
                </image>
              </view>
            </u-form-item>
            <u-form-item label="抖音UID" borderBottom>
              <view class="u-text-right" style="vertical-align: middle;">
                {{form.anchor_card_detail.dy_uid}}
                <image style="width: 28rpx; height: 28rpx;" src="../../static/img/copy.png" mode=""
                  @tap.stop="copy(form.anchor_card_detail.dy_uid)"></image>
              </view>
            </u-form-item>
            <u-form-item label="粉丝量" borderBottom>
              <view class="u-text-right">
                {{form.fans_num}}
              </view>
            </u-form-item>
            <u-form-item label="带货力等级" borderBottom>
              <view class="u-text-right">
                LV{{form.sales_level}}
              </view>
            </u-form-item>
            <u-form-item label="内容力等级" borderBottom>
              <view class="u-text-right">
                LV{{form.content_level}}
              </view>
            </u-form-item>
            <u-form-item label="主页链接" borderBottom>
              <view class="u-text-right" style="vertical-align: middle;">
                {{ form.anchor_card_detail.home_url}}
                <image style="width: 28rpx; height: 28rpx;" src="../../static/img/copy.png" mode=""
                  @tap.stop="copy(form.anchor_card_detail.home_url)"></image>
              </view>
            </u-form-item>
            <u-form-item label="达人联系方式" borderBottom>
              <view class="" style="vertical-align: middle;display: flex;align-items: center;justify-content: right;">
                <view  v-if="form.join_state == 0" style="margin-left: auto;">
                  <image v-if="form.join_state == 0" style="width: 28rpx; height: 28rpx;margin-left: auto;"
                    src="../../static/img/Frame (2).png" mode="">
                  </image>
                    <span v-if="form.join_state == 0" style="text-align: right;">{{ form.anchor_card_detail.phone}}</span>
                    <image v-if="form.join_state == 0" style="width: 28rpx; height: 28rpx;" src="../../static/img/copy.png"
                      mode="" @tap.stop="copy(form.anchor_card_detail.phone)">
                </view>
                <view v-if="form.join_state == 1" style="text-align: right;margin-left: auto;">
                  <span style="color: rgba(0, 0, 0, 0.4);" v-if="form.join_state == 1"> (邀约后显示)</span>
                </view>
               
                </image>
              </view>
            </u-form-item>
            <view class="margin-top-sm">
              简介
            </view>
            <view class="margin-top-sm padding-sm"
              style="height: 200rpx; background-color: #f2f3f6; border-radius: 16rpx;">
              {{ form.anchor_card_detail.detail}}
            </view>
          </u--form>
        </u-collapse-item>
      </view>
      <view class="crad padding-sm margin-top-sm">
        <u-collapse-item title="带货信息" name="1" :border="false">
          <view class="u-flex-between padding-top-sm" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              粉丝画像
            </view>
            <view class="" @tap="showImgClick(form.anchor_card_detail.fans_img_url)">
              <image style="width: 150rpx; height: 150rpx;" :src="form.anchor_card_detail.fans_img_url"
                mode="aspectFill">
              </image>
              <!-- <u-album :urls="urls2"></u-album> -->
            </view>
          </view>
          <view class="u-flex-between padding-top-sm" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              带货力等级
            </view>
            <view class="" @tap="showImgClick(form.anchor_card_detail.sales_level_img)">
              <image style="width: 150rpx; height: 150rpx;" :src="form.anchor_card_detail.sales_level_img"
                mode="aspectFill">
              </image>
            </view>
          </view>
          <view class="u-flex-between padding-top-sm" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              内容力等级
            </view>
            <view class="" @tap="showImgClick(form.anchor_card_detail.content_level_img)">
              <image style="width: 150rpx; height: 150rpx;" :src="form.anchor_card_detail.content_level_img"
                mode="aspectFill">
              </image>
            </view>
          </view>
          <view class="u-flex-between padding-top-lg padding-bottom-lg" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              擅长内容形式
            </view>
            <view class="">
              {{form.order_content_type.content_type_name}}
            </view>
          </view>
          <view class="u-flex-between padding-top-lg padding-bottom-lg" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              优势品类
            </view>
            <view class="">
              外卖
            </view>
          </view>
          <view class="u-flex-between padding-top-sm" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              优秀案例
            </view>
            <view class="" @tap="showImgClick(form.anchor_card_detail.example_img)">
              <image style="width: 150rpx; height: 150rpx;" :src="form.anchor_card_detail.example_img"
                mode="aspectFill">
              </image>
            </view>
          </view>
        </u-collapse-item>
      </view>
      <view class="crad padding-sm margin-top-sm">
        <u-collapse-item title="接单标准" name="2" :border="false">
          <u--form labelPosition="left" :model="form" ref="formRef" :labelWidth="120">
            <u-form-item label="内容形式" borderBottom>
              <view class="u-text-right">
                <span v-for="(item,i) in form.anchor_card_detail.content_type_data" :key="i">{{item}}{{','}}</span>
              </view>
            </u-form-item>
            <u-form-item label="服务费标准" borderBottom>
              <view class="u-text-right">
                {{form.anchor_card_detail.service_price}}元
              </view>
            </u-form-item>
            <u-form-item label="视频可修改次数" borderBottom>
              <view class="u-text-right">
                <template v-if="form.anchor_card_detail.video_num == 0">
                  不限
                </template>
                <template v-if="form.anchor_card_detail.video_num != 0">
                  {{form.anchor_card_detail.video_num}}次
                </template>

              </view>
            </u-form-item>
            <u-form-item label="佣金" borderBottom>
              <view class="u-text-right">
                {{form.anchor_card_detail.price}}
              </view>
            </u-form-item>
            <u-form-item label="备注" borderBottom>
              <view class="u-text-right">
                {{form.anchor_card_detail.remark}}
              </view>
            </u-form-item>
          </u--form>
        </u-collapse-item>

      </view>
      <!-- <view class="crad padding-sm margin-top-sm" v-if="form.join_state == 1">
        <u-collapse-item title="邀约信息" name="3" :border="false">
          <view class="padding-sm" style="background-color: #f2f3f6;">
            <u--form labelPosition="left" :model="form" ref="formRef" :labelWidth="120">
              <u-form-item label="探店时间" borderBottom>
                <view class="u-text-right">
                  {{form1.time}}
                </view>
              </u-form-item>
              <u-form-item label="探店门店" borderBottom>
                <view class="u-text-right">
                  {{form1.order_store_id}}
                </view>
              </u-form-item>
              <u-form-item label="报名带货力等级" borderBottom>
                <view class="u-text-right">
                  {{form1.sales_level}}
                </view>
              </u-form-item>
              <u-form-item label="探店人数" borderBottom>
                <view class="u-text-right">
                  {{form1.num}}
                </view>
              </u-form-item>
            </u--form>
          </view>
          <view class="u-flex-between padding-top-lg padding-bottom-lg" style="border-bottom: 1px solid #f2f3f6;">
            <view class="">
              邀约状态
            </view>
            <view class=""
              style="width: 92rpx;height: 36rpx;background-color: #D0D1DB; border-radius: 10rpx 0;font-size: 18rpx;text-align: center;line-height: 36rpx;color: #fff;">
              <span>已邀约</span> -->
      <!-- <span>未邀约</span> -->
      <!-- </view>
          </view>
          <view class="u-flex-between">
            <u-button color="#7D81A9" size="mini" shape="circle" @click="click1" text="同意"></u-button>
            <u-button color="#7D81A9" size="mini" shape="circle" @click="click2" text="拒绝"></u-button>
            <u-button color="#7D81A9" size="mini" shape="circle" @click="click3" text="编辑"></u-button>
            <u-button color="#7D81A9" size="mini" shape="circle" @click="click4" text="取消商单"></u-button>

          </view>
        </u-collapse-item>

      </view> -->

    </u-collapse>
    <view class="bottomBox">
      <view class="bottomBoxTitle">
        请自行斟酌达人信息真伪，谨防受骗
      </view>
      <view class="btns">
        <image v-if="!form.collect_state" class="collectImg" src="../../static/img/nocollect.png" @tap="collectChange">
        </image>
        <image v-if="form.collect_state" class="collectImg" src="../../static/img/collect.png" @tap="collectChange">
        </image>
        <view class="btn" @tap="get_invite_order_list(form.anchor_card_detail.card_id)" v-if="form.join_state == 1">
          邀约达人
        </view>
        <view class="btn" v-if="form.join_state == 0">
          已邀约
        </view>
      </view>
    </view>
    <!-- 达人名片的弹框 -->
    <u-popup class="collectPopup" bgColor="#F2F3F6" :show="collectShow" :round="10" closeable
      @close="collectShow = false" @open="open">
      <view class="list" style="height: 700rpx;overflow-y: scroll;">
        <view class="item" v-for="(item,i) in orderList" :key="i">
          <image v-if="item.order_state == '进行中'" class="stateImg" src="../../static/img/Slice 43.png"></image>
          <image v-if="item.order_state == '已完成'" class="stateImg" src="../../static/img/Slice 44.png"></image>
          <image v-if="item.order_state == '已取消'" class="stateImg" src="../../static/img/Slice 45.png"></image>
          <view class="itemContent">
            <view class="title">
              <view class="name">
                {{item.shop_name}}
              </view>
              <view class="money">
                <!-- <span>￥66</span>
		          <span style="font-size: 24rpx;">/0.3%</span> -->
                <span style="font-size: 24rpx;">￥{{item.price}}</span>
              </view>
            </view>
            <view class="lableBoxS">
              <view v-if="item.city" style="background-color: #DDE3F9;">
                {{item.city_data}}
              </view>
              <view v-if="item.category_name" style="background-color: #FFDFC1;">
                {{item.category_name}}
              </view>
              <view v-if="item.content_type_name" style="background-color: #CAE5BD;">
                {{item.content_type_name}}
              </view>
            </view>
            <view class="time">
              截止：{{item.recruit_end_time}}
            </view>
            <view class="bottomBoxs">
              <view class="avatar">
                <image :src="item.avatar" mode=""></image>
              </view>
              <view class="userName" style="flex: 1;">
                {{item.nickname}}
              </view>
              <view class="btnS">
                <view class="btn" @click.stop="baom(item)">
                  邀约
                </view>
                <button class="btnNone" style="display: flex;align-items: top;" open-type="share" catchtap="share">
                  <image class="shareImg" src="../../static/img/Frame.png" mode=""></image>
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 图片弹框 -->
    <u-popup :show="imgShow" @close="imgShow = false" :safeAreaInsetBottom="false" mode="center" bgColor="transparent">
      <image class="showImg" :src="showImgUrl" mode="aspectFit"></image>
    </u-popup>
  </view>

</template>
<script>
  export default {
    data() {
      return {
        loadState: false,
        imgShow: false,
        showImgUrl: '',
        listshangdan: [],
        queryInfo: {
          city: '',
          category_ids: '',
          remunerate_type_ids: '',
          content_type_ids: '',
          chain_type_ids: '',
          // state: '进行中',
          gender: '',
          search_data: '',
        },
        form: {},
        collect: false,
        collectShow: false,
        form1: [{
          order_sn: "", //单号
          order_state: "", //状态
          shop_name: "", //标题
          order_remunerate_id: '',
          category_name: "", //品类
          content_type_name: "", //内容
          recruit_start_time: "",
          recruit_end_time: "", //截止时间
          nickname: "", //用户名
          avatar: "", //头像
          price: "" //价格
        }],
        urls2: [

        ],
        moren: ['0', '1', '2', '3'],
        orderList: []
      };
    },
    computed: {
      lstyle() {
        return {
          fontSize: '24rpx',

        };
      }
    },
    async onLoad(options) {
      this.getIndex()
      const obj = {
        id: options.id
      }
      const {
        data: res
      } = await uni.$http.post('anchor/get_anchor_detail', obj)
      this.form = res.data
      // this.urls2.push(this.form.anchor_card_detail.sales_level_img)
      const objs = {
        order_join_id: this.form.id
      }
      const {
        data: ress
      } = await uni.$http.post('order/get_join_data', objs)

      this.form1 = ress.data
    },
    methods: {
      showImgClick(url) {
        this.showImgUrl = url
        this.imgShow = true
      },
      click4() {

      },
      async click2() {
        const obj = {
          order_join_id: this.form1.order_join_id
        }
        const {
          data: res
        } = await uni.$http.post('order/refuse_invite', this.form1)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        if (res.code == 1) {
          uni.showToast({
            icon: 'success',
            title: res.msg
          })
        }

      },

      // 收藏
      async collectChange() {

        const obj = {
          id: this.form.id,
          type: 2
        }
        const {
          data: res
        } = await uni.$http.post('others/set_collect', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        } else {
          this.form.collect_state = !this.form.collect_state
          if (this.form.collect_state == true) {

            uni.showToast({
              title: '收藏成功',
              icon: 'success'
            });
          }
          if (this.form.collect_state == false) {
            uni.showToast({
              title: '取消收藏',
              icon: 'error'
            });
          }
        }


      },
      // 获取首页数据
      async getIndex() {
        const {
          data: res
        } = await uni.$http.post('index/index', this.queryInfo)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.listshangdan = res.data
      },
      async get_invite_order_list(card_id) {
        this.loadState = true;
        const {
          data: res
        } = await uni.$http.post('anchor/get_invite_order_list', {
          id: card_id
        })
        if (res.code != 1) {
          this.loadState = false;
          this.toast.msg(res.msg)
          return
        }
        if (res.data <= 0) {
          this.toast.msg('您还没有商单，请点击右下方创建商单。')
          this.collectShow = false
          return
        } 
        this.loadState = false;
        this.orderList = res.data
        this.collectShow = true
      },
      async click1() {
        const {
          data: res
        } = await uni.$http.post('order/agree_invite', this.form1)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        if (res.code == 1) {
          uni.showToast({
            icon: 'success',
            title: res.msg
          })
        }

      },

      async baom(item) {

        const obj = {
          order_sn: item.order_sn,
          id: this.form.anchor_card_detail.card_id
        }
        const {
          data: res
        } = await uni.$http.post('anchor/invite_anchor', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          uni.showToast({
            title: '邀约成功',
            icon: 'success'
          });
          this.collectShow = false

          const {
            data: res
          } = await uni.$http.post('anchor/get_anchor_detail', {
            id: this.form.anchor_card_detail.card_id
          })
          this.form = res.data
        }
      }

    },
    async click2() {


      const {
        data: res
      } = await uni.$http.post('order/edit_join_data', this.form1)
      if (res.code != 1) {
        this.toast.msg(res.msg)
      }
      if (res.code == 1) {
        uni.showToast({
          icon: 'success',
          title: res.msg
        })
      }

    },


    open(e) {
      // console.log('open', e)
    },
    close(e) {
      // console.log('close', e)
    },
    change(e) {
      // console.log('change', e)
    },

    confirmRegistration() {
      this.collectShow = false

    }
  }
</script>

<style scoped lang="scss">
  /deep/.showImg {
    width: 650rpx !important;
    height: 700rpx !important;
    object-fit: contain !important;
  }

  page {
    height: 100%;
    padding: 30rpx;
  }

  .button {
    width: 93%;
    color: #fff;
    background-color: #00bfff;
  }

  .crad {
    background-color: #fff;
  }

  .title {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }

  /deep/.u-form-item {
    height: 108rpx;
    /* line-height: 108rpx; */
  }

  .title-s {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }

  .bottomBox {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 204rpx;
    background: #FFFFFF;

  }

  .bottomBoxTitle {
    margin: 24rpx 0 20rpx;
    color: #EAA04A;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
  }

  .btns {
    box-sizing: border-box;
    display: flex;
    padding: 0 32rpx;
  }

  .collectImg {
    width: 64rpx;
    height: 64rpx;
    margin-right: 24rpx;
  }

  .btn {
    width: 598rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #7D81A9;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .list {
    padding-top: 50rpx;

    .item {
      width: 686rpx;
      height: 294rpx;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 24rpx auto;

      .stateImg {
        width: 92rpx;
        height: 36rpx;
      }

      .itemContent {
        padding: 0 22rpx 0 24rpx;

        .title {
          display: flex;
          align-items: center;

          .name {
            width: 380rpx;
            font-size: 32rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .money {
            flex: 1;
            text-align: right;
            color: #EAA04A;
            font-size: 36rpx;
          }
        }

        .lableBoxS {
          display: flex;
          color: rgba(0, 0, 0, 0.6);
          font-size: 20rpx;
          margin-top: 14rpx;
          margin-bottom: 18rpx;

          view {
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 12rpx;
            border-radius: 22rpx;
            margin-right: 8rpx;
          }
        }

        .time {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
          margin-bottom: 24rpx;
        }

        .bottomBoxs {
          display: flex;
          align-items: center;
          height: 52rpx;

          .avatar {
            width: 36rpx;
            height: 36rpx;
            border-radius: 18rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .userName {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            color: rgba(0, 0, 0, 0.6);
            margin: 0 8rpx;
          }

          .identityBoxS {
            flex: 1;
            display: flex;

            view {
              // width: 52rpx;
              height: 24rpx;
              padding: 0 8rpx;
              line-height: 22rpx;
              text-align: center;
              margin-right: 4rpx;
              background-color: #B0A5FF;
              color: #FFFFFF;
              font-size: 18rpx;
              border-radius: 10rpx 0 10rpx;
            }
          }

          .btnS {
            display: flex;

            .btn {
              width: 128rpx;
              height: 52rpx;
              line-height: 52rpx;
              text-align: center;
              background: #7D81A9;
              border-radius: 40rpx;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              margin-right: 16rpx;
            }

            .shareImg {
              width: 52rpx;
              height: 52rpx;
            }
          }
        }
      }
    }

  }
</style>